<script setup></script>

<template>
  <div class="w-full grid grid-rows-4 grid-cols-3 gap-[20px] h-[calc(100vh-60px)] py-[20px]">
    <div class="row-span-1 col-span-2 bg-white/80 rounded-[10px]">
      <div class="grid-cols-4 grid gap-[20px] p-[20px]">
        <div class="flex flex-row gap-[15px] box-border p-[30px] bg-gray-500/10 rounded-[10px]">
          <div class="text-pink-600 pt-[15px] text-[48px]">
            <i class="bi bi-box-fill"></i>
          </div>
          <div>
            <div class="text-[45px]">37</div>
            <div class="text-[14px]">算法模型</div>
          </div>
        </div>

        <div class="flex flex-row gap-[15px] box-border p-[30px] bg-gray-500/10 rounded-[10px]">
          <div class="text-blue-700 pt-[15px] text-[48px]">
            <i class="bi bi-noise-reduction"></i>
          </div>
          <div>
            <div class="text-[45px]">168</div>
            <div class="text-[14px]">镜像数量</div>
          </div>
        </div>
        <div class="flex flex-row gap-[15px] box-border p-[30px] bg-gray-500/10 rounded-[10px]">
          <div class="text-green-600 pt-[15px] text-[48px]">
            <i class="bi bi-list-task"></i>
          </div>
          <div>
            <div class="text-[45px]">37</div>
            <div class="text-[14px]">任务数量</div>
          </div>
        </div>
        <div class="flex flex-row gap-[15px] box-border p-[30px] bg-gray-500/10 rounded-[10px]">
          <div class="text-red-600 pt-[15px] text-[48px]">
            <i class="bi bi-cone-striped"></i>
          </div>
          <div>
            <div class="text-[45px]">25</div>
            <div class="text-[14px]">告警数量</div>
          </div>
        </div>
      </div>
    </div>
    <div class="row-span-2 col-span-1 bg-white/80 rounded-[10px]">2</div>

    <div class="row-span-1 col-span-1 bg-white/80 rounded-[10px]">2</div>
    <div class="row-span-1 col-span-1 bg-white/80 rounded-[10px]">3</div>
    <div class="row-span-2 col-span-2 bg-white/80 rounded-[10px]">4</div>
    <div class="row-span-2 col-span-1 bg-white/80 rounded-[10px]">3</div>
  </div>
</template>

<style scoped lang="less"></style>
